<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框常用样式使用</title>
    <link rel="stylesheet" href="css/md.css">
    <style>

        .backgound-color-container {
            background-color: thistle;
        }
        .backgound-color-container>h2 {
            background-color: gray;
        }
        .backgound-color-container span {
            background-color: yellow;
        }

        .backgound-image-container>.box1 {
            width: 500px;
            height: 500px;
            background-image: url(img/garden.jpg);
            background-color: thistle;
        }

        .backgound-image-container>.box2 {
          
            width: 500px;
            height: 500px;
            background-image: url(img/garden-bg.jpg);
            background-color: thistle;
      
        }

        .backgound-image-container>.box3 {
          
          width: 500px;
          height: 500px;
          background-image: url(img/garden-bg.jpg);
          background-color: thistle;
          background-repeat: no-repeat;
    
        }

        .backgound-image-container>.box4 {
            width: 500px;
            height: 500px;
            background-color: thistle;
            background-image: url(img/garden-bg.jpg);
            background-repeat: no-repeat;
            background-position: center;
        }

        .backgound-image-container>.box5 {
            width: 500px;
            height: 500px;
            background-color: thistle;
            background-image: url(img/garden-bg.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100px 100px;
        }


    </style>
</head>
<body>
    <h1>边框常用样式使用</h1>
    

    <!-- <div class="backgound-image-container">
        <h2>背景图片设置</h2>

        <h3>显示背景图像</h3>
        <div class="box1">
            background-image 大图片，默认情况下，大图不会缩小以适应方框
        </div>
   




        <h3>背景图片平铺</h3>
        <p>小图片，默认情况下，平铺以填充方框</p>
        <div class="box2">
            
        </div>
        <p>小图片，可以设置background-repeat，修改默认平铺行为</p>
        <ul>
            <li>no-repeat — 不重复。</li>
            <li>repeat-x —水平重复。</li>
            <li>repeat-y —垂直重复。</li>
            <li>repeat — 在两个方向重复。</li>
        </ul>
        <div class="box3" >
        </div>



        <h3>背景图像定位</h3>
        <p>background-position属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。</p>
        <div class="box4">
        </div>
           

        <h3>调整背景图片大小</h3>
        <p>background-position可以用来调整图片大小。</p>
        <div class="box5">
        </div>

    </div> -->

    


</body>
</html>